<template>

  <el-page-header @back="goBack">
      <template #content>
        <span class="text-large font-600 mr-3"> 反馈任务详细信息 </span>
      </template>
    </el-page-header>
  
    <div class="feedback-detail">
      <header>
        <img src="@/assets/02.png" alt="Header Image" class="header-image" />
      </header>
  
      <div class="detail-info">
        <el-card>
          <div class="info-item">
            <span>反馈用户：</span
            ><span>{{ task.svName }} {{ task.svPhone }}</span>
          </div>
          <div class="info-item">
            <span>网格：</span><span>{{ task.province }} {{ task.city }}</span>
          </div>
          <div class="info-item">
            <span>详细地址：</span><span>{{ task.address }}</span>
          </div>
          <div class="info-item">
            <span>预估等级：</span
            ><span :class="['aqi-level', getAqiClass(task.aqiLevel)]"
              >{{ task.aqiExplain }}
              {{ task.aqiChinese}}</span
            >
          </div>
          <div class="info-item">
            <span>信息描述：</span><span>{{ task.content }}</span>
          </div>
        </el-card>
      </div>
  
      <div class="inputs">
        <div class="input-group">
          <label>SO₂浓度：</label>
          <input
            type="text"
            v-model="so2Concentration"
            placeholder="请输入SO₂浓度"
            class="aqi-input"
          />
          <label>ug/m3</label>
          <span :class="['aqi-color', getAqiClass(so2Level)]">{{
            getConcentrationLevel(so2Level)
          }}</span>
          
        </div>
        <div class="input-group">
          <label>CO浓度：</label>
          <input
            type="text"
            v-model="coConcentration"
            placeholder="请输入CO浓度"
            class="aqi-input"
          />
          <label>ug/m3</label>
          <span :class="['aqi-color', getAqiClass(coLevel)]">{{
            getConcentrationLevel(coLevel)
          }}</span>
          
        </div>
        <div class="input-group">
          <label>PM2.5：</label>
          <input
            type="text"
            v-model="pm25Concentration"
            placeholder="请输入PM2.5浓度"
            class="aqi-input"
          />
          <label>ug/m3</label>
          <span :class="['aqi-color', getAqiClass(pm25Level)]">{{
            getConcentrationLevel(pm25Level)
          }}</span>
          
        </div>
      </div>
  
      <div class="submit-section">
        <div class="measured-level">
          实测AQI等级：<span :class="['aqi-level', getAqiClass(measuredAqi)]"
            >{{ measuredAqi }}级 {{ getAqiDescription(measuredAqi) }}</span
          >
        </div>
        <el-button type="primary" @click="submitData">提交实测数据</el-button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import { ElCard, ElButton } from "element-plus";
  import axios from '../../axios';
  import { useDateFormatter } from '@/composables/UserDateFormatter'
  import Qs from 'qs'
  const route = useRoute();
  const router = useRouter();
  // 解析传递过来的task数据
  const task = ref(JSON.parse(route.query.task));
  const token = ref(route.query.token);
  
  console.log(task.value);
  
  // 定义浓度值
  const so2Concentration = ref("");
  const coConcentration = ref("");
  const pm25Concentration = ref("");
  
  // 根据浓度值计算AQI等级
  const calculateAqiLevel = (concentration, breakpoints) => {
    const value = parseFloat(concentration);
    if (isNaN(value)) return 0;
    for (let i = 0; i < breakpoints.length; i++) {
      if (value <= breakpoints[i]) return i + 1;
    }
    return breakpoints.length + 1;
  };
  
  const so2Breakpoints = [50, 150, 475, 800, 1600];
  const coBreakpoints = [5, 10, 35, 60, 90, 150];
  const pm25Breakpoints = [35, 75, 115, 150, 250, 500];
  
  const so2Level = computed(() =>
    calculateAqiLevel(so2Concentration.value, so2Breakpoints)
  );
  const coLevel = computed(() =>
    calculateAqiLevel(coConcentration.value, coBreakpoints)
  );
  const pm25Level = computed(() =>
    calculateAqiLevel(pm25Concentration.value, pm25Breakpoints)
  );
  
  // 根据浓度值获取等级
  const getConcentrationLevel = (concentration) => {
    if (!concentration) return "空";
    const value = parseFloat(concentration);
    if (value == 1) return "一";
    else if (value == 2) return "二";
    else if (value == 3) return "三";
    else if (value == 4) return "四";
    else if (value == 5) return "五";
    else if (value == 6) return "六";
  };
  
  // 获取AQI等级的class
  const getAqiClass = (aqiLevel) => {
    if (aqiLevel == 1) {
      return "green";
    } else if (aqiLevel == 2) {
      return "yellow";
    } else if (aqiLevel == 3) {
      return "orange";
    } else if (aqiLevel == 4) {
      return "red";
    } else if (aqiLevel == 5) {
      return "purple";
    } else if (aqiLevel == 6) {
      return "brown";
    } else return "green";
  };
  
  // 获取AQI等级的描述
  const getAqiDescription = (aqiLevel) => {
    if (aqiLevel == 1) {
      return "优";
    } else if (aqiLevel == 2) {
      return "良";
    } else if (aqiLevel == 3) {
      return "轻度污染";
    } else if (aqiLevel == 4) {
      return "中度污染";
    } else if (aqiLevel == 5) {
      return "重度污染";
    } else if (aqiLevel == 6) {
      return "严重污染";
    }
  };
  
  // 计算实测AQI等级
  const measuredAqi = computed(() => {
    return Math.max(so2Level.value, coLevel.value, pm25Level.value);
  });
  
  
  const currentDate = ref(new Date());
  
  const formattedDate = computed(() => {
    return useDateFormatter(currentDate.value, 'yyyy-MM-dd hh:mm:ss').value;
  });
  
  const date = computed(() => formattedDate.value.slice(0, 10));
  const time = computed(() => formattedDate.value.slice(11, 19));
  
  console.log(    'cityId'+ task.value.city+'provinceId:'+ task.value.province)
  const submitData = async () => {
    currentDate.value = new Date();
    let data=Qs.stringify({
      id: task.value.id, 
      // cityId: null,
      // provinceId: null,
      so2: so2Concentration.value,
      // so2Level: so2Level.value,
      co: coConcentration.value,
      // coLevel: coLevel.value,
      pm: pm25Concentration.value,
      // pm25Level: pm25Level.value,
      aqi: measuredAqi.value,
      time: time.value,
      date: date.value,
      gsId: null,
      assignWork: null
        })
    try {
      const response = await axios.post('/verification/updateVerification', data, {
        headers: {
          Authorization: `Bearer ${token.value}`,
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      });
      console.log('提交数据为：',data);
      let result = response.data;
      console.log('数据提交成功:', result);
      router.push({
        path: "/Grider/TaskList",
        query: {
          token: token.value // 使用已定义的 token 变量
        }
      });
    } catch (error) {
      console.error('数据提交失败:', error);
    }
  };
  
  const goBack = () => {
    router.push({
      path: "/Grider/TaskList",
      query: {
        token: token.value // 使用已定义的 token 变量
      },
    });
  }
  
  </script>
  
  <style>
  .feedback-detail {
    padding: 20px;
    background-color: #f7f8fa;
    min-height: 100vh;
  }
  
  .header-image {
    width: 100%;
    height: auto;
  }
  
  .detail-info {
    margin-bottom: 20px;
  }
  
  .info-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  
  .aqi-level {
    font-weight: bold;
  }
  
  .inputs {
    margin-bottom: 20px;
  }
  
  .input-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .input-group label {
    width: 80px;
  }
  
  .aqi-input {
    flex: 1;
    margin-right: 10px;
    padding: 5px;
  }
  
  .aqi-color {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: white;
    font-weight: bold;
  }
  
  .green {
    background-color: green;
  }
  
  .yellow {
    background-color: yellow;
  }
  
  .orange {
    background-color: orange;
  }
  
  .red {
    background-color: red;
  }
  
  .purple {
    background-color: purple;
  }
  
  .brown {
    background-color: brown;
  }
  
  .submit-section {
    text-align: center;
  }
  
  .measured-level {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
    color: rgb(0, 0, 0);
  }
  </style>
  